<template>
  <div>
     <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>

    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="home"  @click.native="goto('home')">
        <img slot="icon" :src="require(`../assets/images/${selected == 'home' ? 'home1' : 'home'}.png`)" />
        首页
      </mt-tab-item>
      <mt-tab-item id="cyclo"  @click.native="goto('cyclo')">
        <img slot="icon" :src="require(`../assets/images/${selected=='cyclo' ? 'cyclo1' : 'cyclo'}.png`)" />
        百科
      </mt-tab-item>
      <mt-tab-item id="hos"  @click.native="goto('hos')">
        <img slot="icon" :src="require(`../assets/images/${selected == 'hos' ? 'hos1' : 'hos'}.png`)" />
        查医院
      </mt-tab-item>
      <mt-tab-item id="my"  @click.native="goto('my')">
        <img slot="icon" :src="require(`../assets/images/${selected == 'my' ? 'my1' : 'my'}.png`)" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
    data() {
        return {
            selected:this.$route.path.split('/')[2],
        }
    },
    methods: {
        goto(value) {
            if(this.$route.path==`/index/${value}`)return
            this.$router.push(`/index/${value}`)
        }
    },
    watch:{
      selected(to){
        this.selected = to
      }
    },
};
</script>

<style lang="scss" scoped>
.mint-tabbar > .mint-tab-item.is-selected{
    background-color: transparent;
    color: #1296db;
}
</style>
